<template>
	<view class="wrap">
		<scroll-view enable-back-to-top :enable-flex="true" :scroll-y="true" :style="'height: '+windowHeight+'px'"
			:show-scrollbar="false" @scrolltolower="handleLower">

			<view 
			v-if="childlist.length > 0"
			class="category-list">
				<view v-for="(item, index) in childlist" :key="index" class="category-item"
					@tap="productList(item.id, item.name)">
					<image class="category-cover" lazy-load :src="oss(item.image, 50, 50)" />
					<text class="category-title">{{item.name}}</text>
				</view>
			</view>

			<!-- 拼团列表 -->
			<view 
			 v-if="groupsList.length > 0" 
			class="pintuan-list">
				<image class="pintuan-list-bg"
					src="https://dcdn.cxycoder.com/assets/addons/wanlshop/img/show/grueps-top-bg3x.png" mode=""></image>
				<view class="pt-title-wrap">
					<view class="pt-title-left">
						<text class="iconfont rmpt-icon">&#xe710;</text>
						<text class="rmpt">热门拼团</text>
					</view>
					<view class="load-more-wrap" @tap="handleGroups(cid)">
						<text class="load-more">更多</text>
						<text class="iconfont right-icon">&#xe645;</text>
					</view>
				</view>

				<scroll-view :show-scrollbar="false" class="pt-goods-list" scroll-x>
					<view class="pt-goods-item" v-for="(item, index) in groupsList" :key="index" @tap="handleGroupsGoods(item.id)">
						<image class="pt-goods-cover" :src="oss(item.image, 50, 50)"></image>
						<text class="pt-goods-title">{{item.title}}</text>
						<text class="pt-goods-price">¥ {{item.price}}</text>
					</view>
				</scroll-view>
			</view>

			<!-- 分隔符 -->
			<view class="category-recommend-sp">
				<view class="sp-cnt">
					<view class="line"></view>
					<view class="content">
						<text class="iconfont lm-icon">&#xe67c;</text>
						<text class="lm-wz">类目推荐</text>
					</view>
					<view class="line"></view>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="goods-list">
				<goods-item v-for="(item, index) in goodsList" :item="item" :key="index"></goods-item>
			</view>

			<!-- 底部提示 -->
			<uni-load-more :status="status" :content-text="contentText" />
		</scroll-view>
	</view>
</template>

<script>
	import wanlshop_config from '@/common/config/config';

	const appstc = (url) => {
		return wanlshop_config.cdnurl + '/assets/addons/wanlshop/img' + url;
	}

	export default {
		name: "category-page",
		props: {
			windowHeight: {
				type: Number,
				default: 0,
			},
			cid: {
				type: Number,
				default: 0,
			},
			childlist: {
				type: Array,
				default () {
					return [];
				}
			}

		},

		data() {
			return {
				goodsList: [],
				seckillList: [],
				groupsList: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '没有更多商品了'
				}
			};
		},
		beforeCreate() {
			// #ifdef APP-NVUE
			var domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
				'fontFamily': "iconfont1",
				'src': "url('/static/style/font_1394144_fesvc3fixit.ttf')"
			});
			// #endif

		},
		mounted() {
			this.loadData();
		},
		methods: {
			handleLower() {
				this.loadData('lower');
			},
			handleGroups(id) {
				uni.navigateTo({
					url: `/pages/apps/groups/index?id=${id}`,
					animationType: 'pop-in',
					animationDuration: 300,
					success: function(res) {
						wanlshop_config.debug ? console.log(res) : '';
					},
					fail: function(e) {
						wanlshop_config.debug ? console.log(e) : '';
					}
				})
			},
			handleGroupsGoods(id){
				uni.navigateTo({
					url: `/pages/apps/groups/goods?id=${id}`,
					animationType: 'pop-in',
					animationDuration: 300,
					success: function(res) {
						wanlshop_config.debug ? console.log(res) : '';
					},
					fail: function(e) {
						wanlshop_config.debug ? console.log(e) : '';
					}
				})
				
			},

			// 获取数据
			async loadData(type) {
				this.status = 'loading';
				// 判断上拉还是下拉
				if (type === 'upper') {
					this.current_page = 1;
				} else if (type === 'lower') {
					if (this.current_page >= this.last_page) {
						this.status = 'noMore';
						return false;
					} else {
						this.current_page += 1;
					}
				}
				// 请求数据
				await uni.request({
					url: '/wanlshop/common/category',
					data: {
						id: this.cid,
						page: this.current_page
					},
					success: res => {
						this.seckillList = res.data.seckill;
						this.groupsList = res.data.groups;
						// 商品
						if (type === 'lower') {
							this.goodsList = this.goodsList.concat(res.data.goods.data);
						} else {
							this.goodsList = res.data.goods.data;
						}
						this.current_page = res.data.goods.current_page; //当前页码
						this.last_page = res.data.goods.last_page; //总页码
						// 判断是否还有数据
						if (res.data.goods.current_page === res.data.goods.last_page || res.data.goods
							.total === 0) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
					}
				});
			},

			// 分类跳转
			productList(category_id, category_name) {

				uni.navigateTo({
					url: `/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`,
					animationType: 'pop-in',
					animationDuration: 300,
					success: function(res) {
						wanlshop_config.debug ? console.log(res) : '';
					},
					fail: function(e) {
						wanlshop_config.debug ? console.log(e) : '';
					}
				})
			},

			oss(url, w = 120, h = 120, modenum = 2, type = '', format = 'jpg', resize = 'resize', multiple = 3) {
				let image = '';
				let mode = ["m_lfit", "m_mfit", "m_fill", "m_fixed"];
				// 图像，自适应方向：1，渐进显示：1，转换格式：jpg，图片质量：q_90，图片锐化：50，浓缩图
				let rule = ["?x-oss-process=image", "auto-orient,1", "interlace,1", "format,jpg", "quality,q_90",
					"sharpen,50", "resize,m_fixed,w_120,h_120"
				];
				// 转换格式
				if (format == 'png') {
					rule[3] = ["format", "png"].join(",");
				}
				// 判断是否有高度
				if (w == 0) {
					rule[6] = [resize, mode[modenum], `h_${h * multiple}`].join(",");
				} else if (h == 0) {
					rule[6] = [resize, mode[modenum], `w_${w * multiple}`].join(",");
				} else {
					rule[6] = [resize, mode[modenum], `w_${w * multiple}`, `h_${h * multiple}`].join(",");
				}
				//当地址不存在
				if (url) {
					if ((/^data:image\//.test(url))) {
						image = url;
					} else if ((/^(http|https):\/\/.+/.test(url))) {
						rule.pop();
						image = type == 'video' ? url : (url + rule.join("/"));
					} else {
						image = type == 'video' ? (wanlshop_config.cdnurl + url) : (wanlshop_config.cdnurl + url + rule
							.join("/"));
					}
				} else {
					if (type == 'transparent') {

					} else if (type == 'avatar') {
						image = appstc('/common/mine_def_touxiang_3x.png');
					} else {
						image = appstc('/common/img_default3x.png');
					}
				}
				return image;
			},
		}


	}
</script>

<style scoped>
	.iconfont {
		font-family: iconfont1;
	}

	.wrap {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.category-list {
		width: 690rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		padding: 30rpx;
		background-color: #fff;

	}

	.category-item {
		width: 118rpx;
		height: 118rpx;
		margin-bottom: 10rpx;
		justify-content: center;
		align-items: center;
	}

	.category-cover {
		height: 90rpx;
		width: 90rpx;
		border-radius: 6rpx;
		margin-bottom: 10rpx;
	}

	.category-title {
		font-size: 22rpx;
		color: #666666;
	}

	/* 拼团列表 */

	.pintuan-list {
		margin-top: 20rpx;
		background-color: #fff;

		padding: 25rpx;
		border-radius: 18rpx;
		overflow: hidden;
		position: relative;

	}

	.pintuan-list-bg {
		width: 690rpx;
		height: 400rpx;

		position: absolute;
		top: 0;
		left: 0;

		z-index: -1;
	}

	.pt-title {
		color: #ad4e00;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;

	}

	.pt-list {
		white-space: nowrap;


	}

	.pt-title-wrap {

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.pt-title-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.rmpt-icon {
		color: #ad4e00;
		font-size: 32rpx;
	}

	.rmpt {
		color: #ad4e00;
		margin-left: 10rpx;
		font-size: 30rpx;
	}

	.load-more-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.load-more {
		color: #828282;
		font-size: 26rpx;
	}

	.right-icon {
		color: #828282;
		font-size: 26rpx;
	}

	.pt-goods-list {
		margin-top: 20rpx;
		/* background-color: #00f; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.pt-goods-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 10rpx;
	}

	.pt-goods-cover {
		width: 200rpx;
		height: 200rpx;
		border-radius: 18rpx;
		overflow: hidden;
		background-color: #f00;

	}

	.pt-goods-title {
		font-size: 30rpx;
		margin-top: 4rpx;
		margin-bottom: 4rpx;
		
		width: 200rpx;
		
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		lines: 1;
		

	}

	.pt-goods-price {
		color: #0499FD;
		font-size: 26rpx;
	}

	/* 类目推荐 */

	.category-recommend-sp {
		width: 690rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 30rpx;

	}

	.sp-cnt {
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.line {
		width: 60rpx;
		height: 2rpx;
		background-color: #dedede;
	}

	.content {
		margin-left: 50rpx;
		margin-right: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

	}


	.lm-icon {
		color: #ff9700;
		font-size: 52rpx;
		margin-right: 10rpx;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.lm-wz {
		color: #828282;
		font-weight: bold;
		font-size: 30rpx;
	}

	.goods-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
</style>